import { useEffect, useState } from 'react'
import { Input, Select, Table, Tag, Space, Form, Button } from 'antd';
import { useSelector, useDispatch, Link } from "umi";
import styles from './index.less'
import {
    AppstoreOutlined,
    DeleteOutlined,
    EditOutlined,
    SearchOutlined,
    SyncOutlined
} from '@ant-design/icons';
const prodComm = () => {
    // const prodTagList = useSelector((state: { ProdTagList: ProdTagModelState }) => state.ProdTagList);
    // const dispatch = useDispatch()
    // console.log(prodTagList, '页面');

    const { Option } = Select;
    useEffect(() => {
        // dispatch({
        //   type: 'prod-prodTag/getProdTagList'
        // })
    }, [])

    const [isFlag, setIsFlag] = useState(true);

    function changeFlag() {
        console.log(123);
        setIsFlag(!isFlag)
        console.log(isFlag);
    }
    function refresh() {
        console.log('请求数据');

    }
    const columns = [
        {
            title: '序号',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '商品名',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '用户昵称',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '记录时间',
            key: 'tags',
            dataIndex: 'tags',
        },
        {
            title: '回复时间',
            dataIndex: 'sort',
            key: 'sort',
        },
        {
            title: '评价得分',
            dataIndex: 'sort',
            key: 'sort',
        },
        {
            title: '是否匿名',
            dataIndex: 'sort',
            key: 'sort',
        },
        {
            title: '审核状态',
            dataIndex: 'sort',
            key: 'sort',
        },
        {
            title: '操作',
            key: 'action',
            render: (text: any, record: any) => (
                <Space size="middle">
                    <div className={styles.revise}>
                        <EditOutlined />
                        <span>&nbsp;修改</span>
                    </div>
                    <div className={styles.remove}>
                        <DeleteOutlined />
                        <span>&nbsp;删除</span>
                    </div>
                </Space>
            ),
        },
    ];
    const data: readonly any[] | undefined = [];

    return (
        <div className={styles.prodTag}>
            <div className={isFlag === true ? styles.serach : styles.serachNull}>
                <div className={styles.serachName}>
                    <span>商品名</span><Input placeholder="商品名" />
                </div>
                <div className={styles.serachStatus}>
                    <span className={styles.spans}>状态</span>
                    <Form.Item style={{ width: '200px' }}>
                        <Select
                            placeholder="审核状态"
                            allowClear
                        >
                            <Option value="male">待审核</Option>
                            <Option value="female">审核通过</Option>
                            <Option value="female1">审核未通过</Option>
                        </Select>
                    </Form.Item>
                </div>
                <div className={styles.serachitem}>
                    <SearchOutlined />
                    <span>&nbsp;搜 索</span>
                </div>
                <div className={styles.empty}>
                    <DeleteOutlined />
                    <span>&nbsp;清 空</span>
                </div>
            </div>
            <div className={styles.add}>
                <span> </span>
                <div className={styles.icons}>
                    <div onClick={refresh}><SyncOutlined /></div>
                    <div><AppstoreOutlined /></div>
                    <div onClick={changeFlag}><SearchOutlined /></div>
                </div>
            </div>
            <div className={styles.from}>
                <Table columns={columns} dataSource={data} />
            </div>
        </div>
    );
}
export default prodComm